<template>
  <header>
    <van-form @submit="onSubmit">
      <van-nav-bar title="登录"
                   @click-left="$router.go(-1)"
                   left-text="返回"
                   left-arrow>
      </van-nav-bar>
      <van-field v-model="username"
                 name="用户名"
                 label="用户名"
                 placeholder="用户名"
                 :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password"
                 type="password"
                 name="密码"
                 label="密码"
                 placeholder="密码"
                 :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <router-link to="/register">
          <p style="float:right">免费注册</p>
        </router-link>
        <van-button round
                    block
                    type="info"
                    native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </header>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button } from 'vant'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</script>
